import React, { Component } from 'react'
import { View, Input, Form, Button } from '@tarojs/components'
import './index.less'
import Taro from '@tarojs/taro'
import request from "../../utils/http";
import tools from '../../utils/tools';
export default class Mine extends Component {
  state = {
    isLogin: true,
    register: {
      username: '',
      password: '',
      repassword: '',
      nickname: '',
      email: ''
    }
  }
  handleCheck = () => {
    this.setState({
      isLogin: !this.state.isLogin
    })
  }
  handleLogin = (e) => {
    Taro.request({
      url: 'http://127.0.0.1:3007/api/login',
      data: {
        username: e.detail.value.username,
        password: e.detail.value.password
      },
      method: 'POST',
      success: function (res) {
        const data = res.data
        if (data.status == 200) {
          Taro.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 2000,
            mask: true
          })
          tools.tSet('isLogin', true)
          Taro.switchTab({
            url: `../index/index`
          })
        } else {
          Taro.showToast({
            title: '登录失败',
            icon: 'error',
            duration: 2000,
            mask: true
          })
        }
      }
    })
    console.log(e)
  }
  handleRegister = (e) => {
    var that = this
    Taro.request({
      url: 'http://127.0.0.1:3007/api/register',
      data: {
        username: e.detail.value.username,
        password: e.detail.value.password,
        nickname: e.detail.value.nickname,
        email: e.detail.value.email
      },
      method: 'POST',
      success: function (res) {
        const data = res.data
        if (data.status == 200) {
          Taro.showToast({
            title: '注册成功',
            icon: 'success',
            duration: 2000,
            mask: true
          })
          that.setState({
            register: {
              username: '',
              password: '',
              repassword: '',
              nickname: '',
              email: ''
            }
          })
        } else {
          Taro.showToast({
            title: '注册失败',
            icon: 'error',
            duration: 2000,
            mask: true
          })
        }
      }
    })
  }
  render() {
    return (
      <View className='login_box'>
        <View className='title'>
          欢迎您,{this.state.isLogin ? '登录' : '注册'}
          <View className='left_btn' onClick={() => this.handleCheck()}>
            {this.state.isLogin ? '注册' : '登录'}
          </View>
        </View>
        {
          this.state.isLogin && <View className='input_box'>
            <Form onSubmit={this.handleLogin} >
              <View className='login_box'>
                <Input type='text' placeholder='请输入用户名' name='username' />
                <Input type='password' placeholder='请输入密码' name='password' />
              </View>
              <View className='tips'>登录遇到问题?</View>
              <Button className='login_btn' formType='submit'>登录</Button>
            </Form>
          </View>
        }
        {
          !this.state.isLogin && <View className='input_box'>
            <Form onSubmit={this.handleRegister} >
              <View className='register_box'>
                <Input type='text' placeholder='请输入用户名' name='username' value={this.state.register.username} />
                <Input type='password' placeholder='请输入密码' name='password' value={this.state.register.password} />
                <Input type='password' placeholder='请再次输入密码' name='repassword' value={this.state.register.repassword} />
                <Input type='text' placeholder='请输入用户昵称' name='nickname' value={this.state.register.nickname} />
                <Input type='text' placeholder='请输入邮箱' name='email' value={this.state.register.email} />
              </View>
              <View className='tips'>注册遇到问题?</View>
              <Button className='register_btn' formType='submit' >注册</Button>
            </Form>
          </View>
        }
      </View>
    )
  }


}
